<template>
  <div class="edit-box">
    <el-form :model="form" :inline="true" label-width="120px">
      <el-form-item label="合同编号: ">{{ form.contractId }}</el-form-item>
      <!-- <el-form-item label="所属类别: ">{{ form.allTypeId }}</el-form-item> -->
      <el-form-item label="关联客户/供应商: ">{{ form.customer.customerName }}</el-form-item>
      <el-form-item label="关联项目: ">{{ form.projects.projectName }}</el-form-item>
      <el-form-item label="签订日期: ">{{ form.signDate }}</el-form-item>
      <el-form-item label="项目负责人: " prop="leadingId">{{ form.leadingUser.userName }}</el-form-item>
      <!-- 列表数据 -->
      <div class="list-box">
        <div class="rateState">{{ options[form.haveTax].label }}</div>
        <el-table :data="form.productContractMids" max-height="500px" stripe class="table-list">
          <el-table-column prop="productName" label="产品/服务">
            <!-- <template slot-scope="scope">{{ productList[scope.row.productId].productName }}</template> -->
          </el-table-column>
          <el-table-column label="单价">
            <template slot-scope="scope">{{ formatterNum(scope.row.unitPrice) }}</template>
          </el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
          <el-table-column label="数量" prop="count"></el-table-column>
          <el-table-column label="折扣">
            <template slot-scope="scope">{{ formatterNum(scope.row.discount) }}</template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="scope">{{ formatterNum(scope.row.total) }}</template>
          </el-table-column>
          <el-table-column label="税率">
            <template slot-scope="scope">{{ getTax(scope.row.tax) }}</template>
          </el-table-column>
        </el-table>
        <div class="submit-box">
          <p>小计：{{ subtotal }} 元</p>
          <p>税额：{{ rateSum }} 元</p>
          <p>合计：{{ sumMoney }} 元</p>
        </div>
        <div class="ys-box" v-if="ysShow">

          <div class="add-btn-box">
            <h3 class="fl" style="margin-right:15px">应收款项</h3>
          </div>
          <el-table :data="form.receivables" max-height="500px" stripe class="table-list">
            <el-table-column type="index" width="150px" :index="indexMethod"></el-table-column>
            <el-table-column label="预计缴费时间" prop="receivablesDate"></el-table-column>
            <el-table-column label="预计缴费金额（元）">
              <template slot-scope="scope">
                {{ formatterNum(scope.row.receivablesMoney) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-form-item label="合同文本" style="width: 100%" prop="remark"></el-form-item>
      <el-form-item label="合同附件">

      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as math from 'mathjs'
import { findById } from '@/api/contract'
export default {
  data() {
    return {
      loading: false,
      date: [],
      ysShow: false,
      fileList: [],
      form: {
        id: '',
        companyId: this.$store.state.user.companyId,
        contractId: '',
        signDate: '',
        startDate: '',
        endDate: '',
        contractType: '',
        customerId: '',
        projectsId: '',
        leadingId: '',
        rateSum: '',
        totalSum: '',
        remark: '',
        haveTax: 0,
        taxMoney: 0,
        receivables: [],
        productContractMids: [],
        customer: {},
        projects: {},
        leadingUser: {}
      },
      productList: [],
      projectList: [],
      customerList: [],
      typeList: [],
      userOptions: [],
      options: [
        {
          val: 0,
          label: '含税'
        },
        {
          val: 1,
          label: '不含税'
        }
      ],
      rateOptions: [
        {
          val: 0,
          label: '0%'
        },
        {
          val: 0.03,
          label: '3%'
        },
        {
          val: 0.05,
          label: '5%'
        },
        {
          val: 0.06,
          label: '6%'
        },
        {
          val: 0.07,
          label: '7%'
        },
        {
          val: 0.09,
          label: '9%'
        },
        {
          val: 0.1,
          label: '10%'
        },
        {
          val: 0.11,
          label: '11%'
        },
        {
          val: 0.13,
          label: '13%'
        },
        {
          val: 0.16,
          label: '16%'
        },
        {
          val: 0.17,
          label: '17%'
        }
      ]
    }
  },
  computed: {
    subtotal() {
      return this.form.productContractMids.reduce((sum, res) => {
        return math.add(sum, res.total).toFixed(2)
      }, 0)
    },
    rateSum() {
      return this.form.productContractMids.reduce((sum, res) => {
        return math
          .add(
            sum,
            math.divide(
              math.multiply(res.total, res.tax),
              math.subtract(1, res.tax)
            )
          )
          .toFixed(2)
      }, 0)
    },
    sumMoney() {
      let sum = this.subtotal
      if (this.haveTax === 1) {
        sum = math.add(this.subtotal, this.rateSum).toFixed(2)
      }
      return sum
    }
  },
  beforeDestroy() {
    this.$off('reload')
    this.$off('changeState')
  },
  methods: {
    initDialogData(id) {
      this.initDialogData(id)
    },
    getTax(tax) {
      return this.rateOptions.filter(res => res.val === tax)[0].label
    },
    initDialogData(id) {
      findById(id).then(res => {
        this.form = res.data
        this.ysShow = this.form.contractType !== 2
        // this.date.push(this.form.startDate)
        // this.date.push(this.form.endDate)
      })
    },
    // 自定义索引
    indexMethod(index) {
      return '第' + (index + 1) + '次'
    },
    reSum(obj) {
      return math
        .subtract(math.multiply(obj.unitPrice, obj.count), obj.discount)
        .toFixed(2)
    },
    formatterNum(val) {
      return parseFloat(val).toFixed(2)
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-box {
  padding: 0 50px;
  overflow-y: auto;
}
.dialog-footer {
  text-align: right;
}
.el-form--inline .el-form-item {
  width: 30%;
}
.list-box {
  margin-bottom: 15px;
}
.add-btn-box {
  height: 50px;
  line-height: 50px;
}
.submit-box {
  line-height: 50px;
  font-size: 18px;
  text-align: right;
}
.rateState {
  text-align: right;
}
</style>
